<template>
  <div class="board">
    <el-header>
      <el-input placeholder="请选择查询类型" v-model="onceInfo.communityname" style="width: 200px"></el-input>
      <el-input placeholder="请输入查询内容" v-model="onceInfo.unitname" style="width: 200px"></el-input>
      <!-- 查询 -->
      <el-button type="primary" @click="getOnceData">
        <i class="el-icon-search"></i>查询
      </el-button>
      <!-- 添加 -->
      <el-button type="success" @click="addShowInit">
        <i class="el-icon-plus" style="margin-right: 5px"></i>录入
      </el-button>
      <el-button :data="tableData" type="primary" @click="exportExcel">
        <i class="el-icon-refresh-right" style="margin-right: 5px"></i>重置
      </el-button>
    </el-header>
    <el-table @cell-click="cellHandleclick" :data="tableData" border style="width: 100%">
      <el-table-column label="序号">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户账号">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名称">
        <template slot-scope="scope">
          <span>{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">
          <span>{{ scope.row.sex }}</span>
        </template>
      </el-table-column>
      <el-table-column label="家庭地址">
        <template slot-scope="scope">
          <span>{{ scope.row.homeaddress }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="描述">
        <template slot-scope="scope">
          <span>{{ scope.row.note }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 1">管理员</span>
          <span v-else>普通用户</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="300">
        <template slot-scope="scope">
          <el-button
            size="mini"
            :row="scope.row"
            style="color: #000"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            :row="scope.row"
            style="color: rgb(98, 168, 234)"
            @click="handledetail(scope.row)"
          >详情</el-button>
          <el-button size="mini" type="danger" plain @click="handleDelete(scope.row)">作废</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 模态框 -->
    <el-dialog :title="addInfo.id ? '编辑': '录入' " :visible.sync="dialogFormVisible">
      <el-form :model="addInfo">
        <el-form-item label="用户账号">
          <el-col :span="12">
            <el-input v-model="addInfo.username" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-col :span="12">
            <el-input v-model="addInfo.password" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="性别">
          <el-col :span="12">
            <el-input v-model="addInfo.sex" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="addInfo.type" placeholder="请选择" type>
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="家庭住址">
          <el-col :span="12">
            <el-input v-model="addInfo.homeaddress" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-col>
            <el-input v-model="addInfo.email" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="用户描述">
          <el-col>
            <el-input v-model="addInfo.note" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="quit">取 消</el-button>
        <el-button type="primary" @click="judgment">确 定</el-button> 
      </div>
    </el-dialog>

    <el-dialog title="详情" :visible.sync="dialogFormVisible1">
      <el-form :model="addInfo">
        <el-form-item label="用户账号">
          <el-col :span="12">
            <el-input v-model="addInfo.username" autocomplete="off" :disabled="true"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-col :span="12">
            <el-input v-model="addInfo.password" autocomplete="off" :disabled="true"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="性别">
          <el-col :span="12">
            <el-input v-model="addInfo.sex" autocomplete="off" :disabled="true"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="addInfo.type" placeholder="请选择" disabled>
            <el-option
              v-for="item in options"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="家庭住址">
          <el-col :span="12">
            <el-input v-model="addInfo.homeaddress" autocomplete="off" :disabled="true"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-col>
            <el-input v-model="addInfo.email" autocomplete="off" :disabled="true"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="用户描述">
          <el-col>
            <el-input v-model="addInfo.note" autocomplete="off" :disabled="true"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quit">关 闭</el-button>
      </div>
    </el-dialog>

    <Pagination
      :page="sendInfo.page"
      :componentTotal="componentTotal"
      @changeRows="setRows"
      @changePage="setPage"
    ></Pagination>
  </div>
</template>
    
    <script>
import axios from "axios";
import Cookies from "js-cookie";
import Pagination from "@/components/Pagination";
export default {
  data() {
    return {
      fileList: [],
      queryInfo: {
        userName: "",
        userId: "",
        userPhone: ""
      },
      srcList: [],
      tableData: [],
      sendInfo: {},
      Token: "",
      componentTotal: 0,
      // listHander: {
      //   id: "反馈Id",
      //   username: "用户名",
      //   mobile: "手机号码",
      //   feedType: "反馈类型",
      //   content: "反馈内容",
      //   addTime: "添加时间"
      // },
      dialogVisibleUrl: false, //图片模态框控制器
      dialogImageUrl: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      onceInfo: {
        communityname: "",
        unitname: "",
        createDt: "",
        value: "",
        currPage: 1,
        pageNum: 10
      },
      addInfo: {
        u_id: "",
        username: "",
        password: "",
        nickname: "",
        sex: "",
        homeaddress: "",
        type: "",
        email: "",
        note: ""
      },
      options: [
        {
          value: 1,
          label: "管理员"
        },
        {
          value: 2,
          label: "普通用户"
        }
      ],
      addNum: true,
      value: "",
      token:
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjEyLCJ1c2VybmFtZSI6ImFkbWluIiwiZW1haWwiOiJ3ZSIsImhlYWQiOiIyMDI0MDMwODE5Mzc1Nzg3MTE4OTAuanBnIiwidHlwZSI6IjEiLCJpYXQiOjE3MTE0MTQ0MzQsImV4cCI6MTcxMTUwMDgzNH0.6Op2KEUYeJDpAyjhvK8xTvXhLbAruN98K_2kMj7W6rU"
    };
  },
  methods: {
    // 查询按钮的方法
    async getOnceData() {
      const { data: res } = await axios.get(
        `http://community.byesame.com/house/searchList?token=${this.Token}`,
        {
          params: this.onceInfo
        }
      );
      // if (res.code != 200) return this.$message.error("查询失败");
      this.tableData = res.data;
      this.componentTotal = res.total;
      console.log(this.tableData);
    },
    // 图片放大
    cellHandleclick(row) {
      console.log(row);
      this.srcList = [];
      this.srcList.push(row.picUrl);
    },
    //查
    async getTableData() {
      const { data: res } = await axios.get(
        "http://community.byesame.com/users/getUsersByTypePage?type=1&pageNum=10&currPage=0",
        {
          params: this.sendInfo
        }
      );
      console.log(6);
      console.log(res);
      // if (res.code != 200) return this.$message.error("查询失败");
      this.tableData = res.data;
      this.componentTotal = res.total;
      console.log(this.tableData);
    },
    created() {
      this.getTableData();
    },

    // 分页器
    setRows(n) {
      this.addInfo.limit = n;
      this.getTableData();
    },
    setPage(n) {
      this.addInfo.page = n;
      this.getTableData();
    },
    // 导出Excel
    exportExcel() {
      xlsx(this.tableData, this.listHander, "用户信息表");
    },
    // 编辑
    handleEdit(row) {
      this.dialogFormVisible = true;
      this.addInfo = row;
      this.fileList = [];
      this.fileList.push({ url: row.picUrl });
    },
    // 点击模态框的取消，模态框消失
    quit() {
      this.dialogFormVisible = false;
      this.dialogFormVisible1 = false;
      this.getTableData();
    },
    //详情
    handledetail(row) {
      this.dialogFormVisible1 = true;
      this.getTableData();
      this.addInfo = row;
    },
    // 点击确定，提交修改
    async confirmSuccess() {
      // const userId = this.addInfo.id; // 直接使用变量
      this.addInfo.u_id = this.addInfo.id;
      const token = this.Token; // 确保 Token 被正确定义和获取
      const { data: res } = await this.axios.post(
        "http://community.byesame.com/users/upUserData?",
        {
          u_id: this.addInfo.id,
          username: this.addInfo.username,
          password: this.addInfo.password,
          nickname: this.addInfo.nickname,
          sex: this.addInfo.sex,
          homeaddress: this.addInfo.homeaddress,
          type: this.addInfo.type,
          email: this.addInfo.email,
          note: this.addInfo.note,
          token: this.addInfo.token
        }
      );
      this.$message.success("编辑成功");
      this.dialogFormVisible = false;
      this.getTableData();
    },
    // 删除
    handleDelete(row) {
      console.log(row);
      this.$confirm("是否永久删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.removeUser(row);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 图片上传成功的钩子
    handleAvatarSuccess(file) {
      console.log(file);
      this.queryInfo.picUrl = file.data.url;
    }, // 点击放大图片
    magnifyPic(file) {
      console.log("fangfa");
      console.log(file);
      this.dialogImageUrl = file;
      this.dialogVisibleUrl = true;
    },
    //判断
    judgment() {
      if (this.addNum == false) {
        this.addBrand();
      } else {
        this.confirmSuccess();
      }
    },
    // 添加 控制器切换 表单初始化
    addShowInit() {
      this.queryInfo = {};
      this.dialogFormVisible = true;
      this.fileLogoList = [];
      this.fileTeamList = [];
      this.id = "";
      this.addNum = false;
    },
    //添加
    async addBrand() {
      console.log(this.addInfo)
      const { data: res } = await this.axios.post(
        `http://community.byesame.com/users/addUserData?&token=${this.Token}`,
        this.addInfo,
        {
          params: this.addInfo
        }
      );
      this.$message.success("添加成功");
      this.dialogFormVisible = false;
      this.getTableData();
    },
    //删除
    async removeUser(row) {
      const userId = row.id; // 直接使用变量
      const token = this.Token; // 确保 Token 被正确定义和获取

      try {
        const { data: res } = await this.axios.get(
          `http://community.byesame.com/users/delUserData?u_id=${userId}&token=${token}`,
          {
            headers: {
              "X-Litemall-Admin-Token": token
            }
          }
        );

        this.$message.success("删除角色成功");
        this.getTableData();
      } catch (error) {
        console.error("请求失败:", error);
        this.$message.error(
          "删除角色时发生错误，请检查控制台输出或联系管理员。"
        );
      }
    }
  },
  mounted() {
    this.Token = Cookies.get("Admin-Token");
    this.getTableData();
  },
  components: {
    Pagination
  },
  computed: {
    headers() {
      return {
        //上传图片时，携带请求头
        "X-Litemall-Admin-Token": this.Token
      };
    }
  }
};
</script>
    
    <style lang="scss" scoped>
.board {
  padding: 20px;
}
.vatimg {
  width: 145px;
  height: 145px;
  display: block;
}
</style>